<%--
  Created by IntelliJ IDEA.
  User: 10379
  Date: 2020/9/28
  Time: 16:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Editable Table</title>

    <!--data table-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.css"/>

    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style-responsive.css" rel="stylesheet">
</head>
<body class="sticky-header" style="background-color:#E4E7EA">
<section>
    <!--body wrapper start-->
    <div class="wrapper">
        <div class="row">
            <div class="col-sm-12">
                <section class="panel">
                    <header class="panel-heading">
                        JAVA课程管理 <%--${subjectName}后台传过来的课程名--%>
                        <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                     </span>
                    </header>
                    <div class="panel-body">
                        <div class="adv-table editable-table ">
                            <div class="clearfix">
                                <div class="btn-group">
                                    <button onclick="addSubject()" class="btn btn-primary">
                                        新增课程 <i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <div style="float: right"><input type="text" id="text" placeholder="请输入课程相关"/>
                                    <button  class="button" onclick="queryUserByAddress()">查询</button>
                                </div>

                            </div>
                            <div class="space15"></div>

                            <table class="table table-striped table-hover table-bordered" id="editable-sample">
                                <thead>
                                <tr>
                                    <th>课程名字</th>
                                    <th>课程时长</th>
                                    <th>老师</th>
                                    <th>编辑课程</th>
                                    <th>删除课程</th>
                                </tr>
                                </thead>
                                <tbody id="tb">
                                </tbody>
                            </table>
                            <%--分页区域--%>
                            <center>
                                <div class="margin">
                                    共<span id="sum"></span>条数据,
                                    每页显示<select id="pageSizeSelect" onchange="onSelectChange()">
                                    <option value="5">5</option>
                                    <option value="10">10</option>
                                    <option value="15">15</option>
                                </select>条数据，当前是第<span id="currentPageSpan"></span>页，
                                    总共<span id="totalPageSpan"></span> 页
                                    <button class="button" onclick="firstPage()">首页</button>
                                    <button class="button" onclick="prePage()">上一页</button>
                                    <button class="button" onclick="nextPage()">下一页</button>
                                    <button class="button" onclick="lastPage()">尾页</button>
                                </div>
                            </center>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <!--body wrapper end-->
    <%--
            <!--footer section start-->
            <footer>
                2014 &copy; AdminEx by ThemeBucket
            </footer>--%>
    <!--footer section end-->
    <%--这里做一个编辑用户信息的模态框--%>
    <div class="modal" id="editModal">
        <%--对话模态框--%>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>编辑课程信息</h4>
                </div>
                <div class="modal-body">
                    <label class="control-label">课程名：</label>
                    <input class="form-control" type="text" id="nameInput" placeholder="请输入课程名"/>
                    <label class="control-label">计划开课时长</label>
                    <input class="form-control" type="text" id="durationInput" placeholder="计划时长"/>
                    <label class="control-label">班主任老师</label>
                    <select class="form-control" id="teacherSelect" placeholder="选择老师">

                    </select>
                    <input type="hidden" id="subjectIdInput"/>
<%--                    <input type="hidden" id="collegeIdInput" />--%>

                </div>
                <div class="modal-footer">
                    <button class="button" data-dismiss="modal" onclick="quxiao()">取消</button>
                    <button class="button" onclick="editConfirm()">确定</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.10.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-migrate-1.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/modernizr.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.nicescroll.js"></script>
<%--<script src="${pageContext.request.contextPath}/static/js/jquery-3.1.1.min.js"></script>--%>

<!--data table-->
<script type="text/javascript"
        src="${pageContext.request.contextPath}/static/js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.js"></script>

<!--common scripts for all pages-->
<script src="${pageContext.request.contextPath}/static/js/scripts.js"></script>

<!--script for editable table-->
<script src="${pageContext.request.contextPath}/static/js/editable-tablemjx.js"></script>

<!-- END JAVASCRIPTS -->
<script>
    jQuery(document).ready(function () {
        EditableTable.init();
    });


    $(function () {
        collegeId = ${collegeId};/* var collegeId =${collegeId};后台传递过来的collegeId*/
        loadListByPage();
        choiceTeacher();
    })

    function showList(subjectList) {

        var html = '';
        //遍历subjectList数组
        for (var i = 0; i < subjectList.length; i++) {
            //拿到一个课程信息
            var item = subjectList[i];
            console.log(item);
            html += "<tr>";
            // html += "<td><a onclick='showSubjects(\""+item.subjectId+"\")'>" + item.name +"</a></td>";//显示课程的名字
            <%--html += "<td><a href='+${pageContext.request.contextPath}+"/subject/showSubjects?subjectId="+subjectId'>" + item.name +"</a></td>";//显示课程的名字--%>
            html += "<td><a href=";
            html+="${pageContext.request.contextPath}/subject/showSubjects?subjectId="+item.subjectId;
            html+=">" + item.name +"</a></td>";//显示课程的名字
            html += "<td>" + item.duration + "</td>";
            html += "<td>" + item.teacher.name + "</td>";
            html += "<td><input type='button' value='编辑' style='width: content-box ; height: auto' onclick='subjectDetail(\"" + item.subjectId + "\")'/></td>";
            html += "<td><input type='button' value='删除' style='width: content-box ; height: auto' onclick='subjectDelete(\"" + item.subjectId + "\")'/></td>";
            html += "</tr>";
        }
        $("#tb").html(html);
    }

    function addSubject() {
        //显示用户编辑的模态框
        showEditModal();
    }

    //对单个课程的编辑
    function subjectDetail(subjectId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/subject/getOneSubject",
            type: 'get',
            data: {"subjectId": subjectId},//传递课程id
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showEditModal(result.subject);
                }
            },
            error: function (err) {
                alert(err.message);
            }
        })
    }

    //显示用户编辑界面的模态框
    function showEditModal(subject) {
        if (subject != null) {
            $("#subjectIdInput").val(subject.subjectId);//传递subjectId
            $("#nameInput").val(subject.name);
            $("#durationInput").val(subject.duration);

            $("#teacherSelect").val(subject.teacher.teacherId);//根据sex的值来选中select中的option
            // $("#usernameInput").attr("disabled", "disabled");
        } else {
            clearModal();
        }
        $("#editModal").modal("show");
    }

    //确定修改课程信息
    function editConfirm() {
        var subjectIdValue = $("#subjectIdInput").val();
        var nameValue = $("#nameInput").val();
        var teacherValue = $("#teacherSelect").val();
        var durationValue = $("#durationInput").val();
        var collegeIdValue = <%--${collegeId}--%>collegeId;

        var teacher = {teacherId: teacherValue};
        var dataValue = {
            subjectId: subjectIdValue,
            name: nameValue,
            duration: durationValue,
            teacher: teacher,
            collegeId:collegeIdValue
        };
        var subjectString = JSON.stringify(dataValue);
        console.log(subjectString);

        /*if(nameValue.length==0){
            alert("学科名不能为空");
            $("#nameInput").focus();
            return;
        }if(durationValue.length==0){
            alert("计划时长不能为空");
            $("#addressInput").focus();
            return;
        }*/
        $.ajax({
            url: "${pageContext.request.contextPath}/subject/editSubject",
            type: 'post',
            contentType: 'application/json',
            data: subjectString,//传递用户编辑后的信息
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    //再次分页加载数据并显示在页面上
                    $("#editModal").modal("hide");//关闭模态框
                    loadListByPage();
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    //清空模态框里面的数据
    function clearModal() {
        $("#subjectIdInput").val(0);//传递subjectId
        $("#nameInput").val("");
        $("#teacherSelect").val(0);//
        $("#durationInput").val("");

        // $("#usernameInput").removeAttr("disabled");//去掉disabled这个属性
    }


    //当前页码
    var currentPage = 1;
    //每页的记录个数
    var pageSize = 5;
    //总共有多少页
    var totalPage;
    $(function () {
        // loadList();
        loadListByPage();
    })

    //用户修改的每页的记录数
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();
        currentPage = 1;
        loadListByPage();
    }

    //首页的回调方法
    function firstPage() {
        currentPage = 1;
        loadListByPage();
    }

    //上一页的回调方法
    function prePage() {
        currentPage--;
        if (currentPage < 1) {
            currentPage = 1;
        }
        loadListByPage();
    }

    //下一页的回调方法
    function nextPage() {
        currentPage++;
        if (currentPage > totalPage) {
            currentPage = totalPage;
        }
        loadListByPage();
    }

    //尾页回调方法
    function lastPage() {
        currentPage = totalPage;
        loadListByPage();
    }

    //分页加载用户列表
    function loadListByPage(subjectName) {
        if(subjectName!=null){
            //刷新页面后都是显示第一页
            $.ajax({
                url: "${pageContext.request.contextPath}/subject/getListByPageAndSubjectName",
                type: 'get',
                data: {"currentPage": currentPage, "pageSize": pageSize, "collegeId": collegeId,"subjectName":subjectName},
                dataType: 'json',
                success: function (result) {
                    if (result.code == 0) {
                        showList(result.subjectList);
                        totalPage = result.totalPage;
                        $("#totalPageSpan").html(totalPage);
                        $("#currentPageSpan").html(currentPage);
                        $("#sum").html(result.sum);
                    }
                },
                error: function (err) {
                    alert(JSON.stringify(err));
                }
            })
        }else{
        //刷新页面后都是显示第一页
        $.ajax({
            url: "${pageContext.request.contextPath}/subject/getListByPage",
            type: 'get',
            data: {"currentPage": currentPage, "pageSize": pageSize, "collegeId": collegeId},
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showList(result.subjectList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                    $("#sum").html(result.sum);
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
        }
    }

    function subjectDelete(subjectId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/subject/deleteOneBySubject",
            type: 'get',
            contentType: 'application/x-www-form-urlencoded',//指明是个普通的表单提交
            data: {"subjectId": subjectId},//传递课程id
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    //再次分页加载数据并显示在页面上
                    loadListByPage();
                }
                alert(result.message);
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    function choiceTeacher() {
        // alert("来到选择老师方法中");
        // console.log("选择老师");
        $.ajax({
            url: "${pageContext.request.contextPath}/subject/getTeachers",
            type: 'get',
            dataType: 'json',
            data:{"collegeId":collegeId},
            success: function (result) {
                if (result.code == 0) {
                    // showList(result.userList);
                    showTeacherList(result.teacherList)
                    //给下拉框加选择项！！！
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }

        })
    }

    //获取当前学院的老师列表
    function showTeacherList(teacherList) {
        var html = '';
        //遍历teacherList数组
        for (var i = 0; i < teacherList.length; i++) {
            //拿到一个老师信息
            var item = teacherList[i];
            html += "<option value=";
            html += item.teacherId;
            html += ">";
            html += item.name;
            html += "</option>";
        }
        $("#teacherSelect").html(html);
    }
    //根据课程名进行模糊查询
    function queryUserByAddress() {
        var text = $("#text").val();
        loadListByPage(text);
    }
</script>

</body>
</html>
